<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dancing Man</title>
    <style>
        #root {
            font-family: "Courier New", monospace;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="root">
    </div>
<script>
	const fps = 24;
	const root = document.getElementById("root");
	const textTime = 12;

	let frames = [
		{
			id: "start",
			repeat: 2,
			picture: [
				"         000         ",
				"        0   0        ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			id: "head_1",
			repeat: 12,
			picture: [
				"         000         ",
				"        0   0        ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			id: "head_2",
			repeat: 12,
			picture: [
				"                 ",
				"         000        ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
        "head_1",
        "head_2",
		"head_1",
		"head_2",
		"head_1",
		"head_2",
		"head_1",
		"head_2",
		{
			repeat: 2,
			picture: [
				"         000         ",
				"        0   0        ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00    00      ",
				"       00    00      ",
				"       00    XX      ",
				"       XX    XX      ",
				"       XX            ",
			],
		},
		{
			repeat: 2,
			picture: [
				"         000         ",
				"        0   0        ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00    00      ",
				"       00     00     ",
				"       00     XX     ",
				"       XX     XX     ",
				"       XX            ",
			],
		},
		{
			id: "slide_l1",
			repeat: 2,
			picture: [
				"         000         ",
				"        0   0        ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00    00      ",
				"       00     00     ",
				"       00      00    ",
				"       XX      XX    ",
				"       XX      XX    ",
			],
		},
		{
			id: "slide_n",
			repeat: 2,
			picture: [
				"          000         ",
				"         0   0        ",
				"         0___0        ",
				"      00000000000     ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"      00-------00     ",
				"       WW00000WW      ",
				"        00    00       ",
				"       00      00      ",
				"       00      00     ",
				"       00      00    ",
				"       XX      XX    ",
				"       XX      XX    ",
			],
		},
		{
			id: "slide_r1",
			repeat: 2,
			picture: [
				"           000         ",
				"          0   0        ",
				"          0___0        ",
				"       00000000000     ",
				"      00 0000000 00    ",
				"      00 0000000 00    ",
				"      00 0000000 00    ",
				"       00-------00     ",
				"        WW00000WW      ",
				"        00     00       ",
				"        00     00      ",
				"       00      00     ",
				"       00      00    ",
				"       XX      XX    ",
				"       XX      XX    ",
			],
		},
		{
			id: "slide_r2",
			repeat: 2,
			picture: [
				"            000         ",
				"           0   0        ",
				"           0___0        ",
				"        00000000000     ",
				"       00 0000000 00    ",
				"       00 0000000 00    ",
				"       00 0000000 00    ",
				"        00-------00     ",
				"         WW00000WW      ",
				"        00      00       ",
				"        00      00      ",
				"        00      00     ",
				"       00      00    ",
				"       XX      XX    ",
				"       XX      XX    ",
			],
		},
		{
			id: "slide_r3",
			repeat: 2,
			picture: [
				"             000         ",
				"            0   0        ",
				"            0___0        ",
				"         00000000000     ",
				"        00 0000000 00    ",
				"        00 0000000 00    ",
				"        00 0000000 00    ",
				"         00-------00     ",
				"          WW00000WW      ",
				"         00      00       ",
				"         00      00      ",
				"        00      00     ",
				"       00       00    ",
				"       XX      XX    ",
				"       XX      XX    ",
			],
		},
		"slide_r2",
		"slide_r1",
		"slide_n",
		"slide_l1",
		{
			id: "slide_l2",
			repeat: 2,
			picture: [
				"        000         ",
				"       0   0        ",
				"       0___0        ",
				"    00000000000     ",
				"   00 0000000 00    ",
				"   00 0000000 00    ",
				"   00 0000000 00    ",
				"    00-------00     ",
				"     WW00000WW      ",
				"      00    00      ",
				"      00     00     ",
				"       00      00   ",
				"       00      00   ",
				"       XX      XX   ",
				"       XX      XX   ",
			],
		},
		{
			id: "slide_l3",
			repeat: 4,
			picture: [
				"       000         ",
				"      0   0        ",
				"      0___0        ",
				"   00000000000     ",
				"  00 0000000 00    ",
				"  00 0000000 00    ",
				"  00 0000000 00    ",
				"   00-------00     ",
				"    WW00000WW      ",
				"      00    00      ",
				"      00     00     ",
				"      00      00   ",
				"      00      00   ",
				"       XX      XX   ",
				"       XX      XX   ",
			],
		},
        "slide_l2",
        "slide_l1",
        "slide_n",
        "slide_r1",
        "slide_r2",
        "slide_r3",
        "slide_r2",
        "slide_r1",
        "slide_n",
        "slide_l1",
        "slide_l2",
        "slide_l3",

		"slide_l2",
		"slide_l1",
		"slide_n",
		"slide_r1",
		"slide_r2",
		"slide_r3",
		"slide_r2",
		"slide_r1",
		"slide_n",
		"slide_l1",
		"slide_l2",
		"slide_l3",

		"slide_l2",
		"slide_l1",
		"slide_n",
		"slide_r1",
		"slide_r2",
		"slide_r3",
		"slide_r2",
		"slide_r1",
		"slide_n",
		"slide_l1",
		"slide_l2",
		"slide_l3",

		"slide_l2",
		"slide_l1",
		"slide_n",
		"slide_r1",
		"slide_r2",
		"slide_r3",
		"slide_r2",
		"slide_r1",
		"slide_n",
		"slide_l1",
		"slide_l2",
		"slide_l3",

		"slide_l2",
		"slide_l1",
		"slide_n",
		"slide_r1",
		"slide_r2",
		"slide_r3",
		"slide_r2",
		"slide_r1",
		"slide_n",
		"slide_l1",
		"slide_l2",
		"slide_l3",

		"slide_l2",
		"slide_l1",
		"slide_n",
		"slide_r1",
		"slide_r2",
		"slide_r3",
		"slide_r2",
		"slide_r1",
		"slide_n",
		"slide_l1",
		"slide_l2",
		"slide_l3",

        "slide_l2",
        "slide_l1",
        "slide_n",
		{
			id: "jump_1",
			repeat: 2,
			picture: [
				"          000         ",
				"         0   0        ",
				"         0___0        ",
				"      00000000000     ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"      00-------00     ",
				"       WW00000WW      ",
				"        00    00       ",
				"       00      00      ",
				"      00        00     ",
				"      XX        XX    ",
				"      XX        XX    ",
				"                 ",
			],
		},
		{
			id: "jump_2",
			repeat: 6,
			picture: [
				"          000         ",
				"         0   0        ",
				"         0___0        ",
				"      00000000000     ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"      00-------00     ",
				"       WW00000WW      ",
				"       00     00       ",
				"      00        00      ",
				"     00          00     ",
				"     XX          XX    ",
				"     XX          XX    ",
				"                 ",
			],
		},
		{
			id: "jump_3",
			repeat: 12,
			picture: [
				"          000         ",
				"         0   0        ",
				"         0___0        ",
				"      00000000000     ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"      00-------00     ",
				"       WW00000WW      ",
				"       00     00       ",
				"      00        00      ",
				"     00          00     ",
				"     00          00    ",
				"    XX            XX    ",
				"    XX            XX",
			],
		},
		{
			id: "jump_4",
			repeat: 2,
			picture: [
				"                   ",
				"          000         ",
				"         0   0        ",
				"         0___0        ",
				"      00000000000     ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"     00 0000000 00    ",
				"      00-------00     ",
				"       WW00000WW      ",
				"       00     00       ",
				"      00        00      ",
				"     00          00    ",
				"    XX            XX    ",
				"    XX            XX",
			],
		},
        "jump_3",
        "jump_2",
        "jump_1",
        "start",
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      I'm  ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      I'm bad ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      I'm bad at ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      I'm bad at ",
				"        0___0      ASCII  ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: fps * 3,
			picture: [
				"         000         ",
				"        0   0      I'm bad at ",
				"        0___0      ASCII art. ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		"start",
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      You  ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      You should ",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      You should make",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      You should make",
				"        0___0      a  ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      You should make",
				"        0___0      a one ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      You should make",
				"        0___0      a one html",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: textTime,
			picture: [
				"         000         ",
				"        0   0      You should make",
				"        0___0      a one html page",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: fps * 3,
			picture: [
				"         000         ",
				"        0   0      You should make",
				"        0___0      a one html page",
				"     00000000000   submission.  ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
		{
			repeat: fps * 10,
			picture: [
				"         000         ",
				"        0   0      metroxe.github.io/one-html-page-challenge/",
				"        0___0        ",
				"     00000000000     ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"    00 0000000 00    ",
				"     00-------00     ",
				"      WW00000WW      ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       00   00       ",
				"       XX   XX       ",
				"       XX   XX       ",
			],
		},
    ];
	const end = frames.length - 1;

	function run(index) {
		let frame = frames[index];
		if (typeof frames[index] === "string") {
			frame = frames.filter(v => v.id === frame)[0];
        }
    	const {repeat, picture} = frame;
    	let newText = "";
    	let i;
    	for (i = 0; i < picture.length; i++) {
    		newText += `${picture[i].replace(/ /g, '\u00a0')}\n`;
        }
    	root.innerText = newText;

    	setTimeout(() => {
			if (index === end) {
				run(0);
			} else {
				run(index + 1);
			}
        }, Math.floor(repeat * Math.floor(1000 / fps)))

    }

    run(0);
</script>
</body>
</html>